<template>
<div class="container">新创建
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>

      <input type="file" name="file" id="fileInput" ref="inputRef">
      <button @click="getSum">提交</button>


</div> 
</template>

<script lang="ts" setup>
import axios from 'axios';
import { regionData, codeToText } from 'element-china-area-data'    
import { ref, watch } from 'vue'
const  options = ref(regionData)
const selectedOptions = ref([])


let input = ref()
let inputRef = ref()
function getSum(){
  let file = inputRef.value.files
  console.log(file);
  axios({
    method: 'post',
    url: 'http://192.168.3.140:8080/spring-boot/user/uploadImage',
    data: {
      files: file,
      id: '10000'
    },
    headers:{
      'Content-Type':'multipart/form-data'
    }
  }).then(res => {
    console.log(res);
    
  })
}

function  handleChange (value) {
        console.log(value)
        value.forEach(el => {
            console.log(codeToText[el]);
            
        })
}
watch(() => input.value,(val) => {
  console.log(val);
  
})
</script>

<style lang="scss" scoped>
.container{

}
</style>